<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
    <script th:src="@{js/jquery-1.7.2.js}"></script>
</head>
<body>
<!--<h1>登录</h1>
<hr>
<p th:text="${msg}" style="color: red;"></p>  &lt;!&ndash;thymeleaf 获取消息&ndash;&gt;
<form th:action="@{/login}" method="post"> &lt;!&ndash;thymeleaf 跳转&ndash;&gt;
    <p>用户名: <input type="text" name="username"></p>
    <p>密码: <input type="text" name="password"></p>
    <p><input type="submit"></p>
</form>-->
<!-- partial:index.partial.html -->
<header class="header">
    <div class="circle c1"></div>
    <div class="circle c2"></div>
    <h1 class="logo">
        <img th:src="@{/assets/MedCheng-logo.png}" style="width: 100%;height:100%;"/>
    </h1>
    <h1 class="slogan">
        技术为基础，以优质服务为载体， 全心全意为病人服务。 醫成通系统欢迎您！
        <span class="ps"></span>
    </h1>
    <div class="hill"></div>
    <div class="register">
        <form th:action="@{/login}" method="post">
            <div style="height: 60px; line-height: 80px;"><h3 style="">欢迎登录</h3></div>
            <div class="register-form-item">
                <input id="username" type="text" name="username" maxlength="11" placeholder="手机号码" >
                <label class="focus focus-username">
                    <span>
                        <i class="icon-tips icon-tips-username"></i>
                        您还没有输入手机号码
                    </span>
                </label>
            </div>
            <div class="register-form-item">
                <input id="password" type="password" name="password" placeholder="密码" >
                <label class="focus focus-password">
                    <span id="password-label">
                        <i class="icon-tips icon-tips-password"></i>
                        您还没有输入密码
                    </span>
                </label>
            </div>
            <div class="register-form-btn">
                <input class="btn" type="submit" value="登 录"/>
            </div>
        </form>
    </div>
</header>
<script>

    $("#username").blur(function() {
        if ($("#username").val() == "") {
            $(".focus-username").css("color","#ff552e");
            $(".icon-tips-username").css("display", "block");
        }
        if ($("#username").val() != "") {
            $(".focus-username").css("color","#ffffff");
            $(".icon-tips-username").css("display", "none");
        }
    })
    $("#username").focus(function() {
        if ($("#username").val() != "") {
            $(".focus-username").css("color","#ffffff");
            $(".icon-tips-username").css("display", "none");
        }
    })

    $("#password").blur(function() {
        if ($("#password").val() == "") {
            $(".focus-password").css("color","#ff552e");
            $(".icon-tips-password").css("display", "block");
        }
        if ($("#password").val() != "") {
            $(".focus-password").css("color","#ffffff");
            $(".icon-tips-password").css("display", "none");
        }
    })
    $("#password").focus(function() {
        if ($("#password").val() != "") {
            $(".focus-password").css("color","#ffffff");
            $(".icon-tips-password").css("display", "none");
        }
    })
</script>
</body>
</html>